<template>
  <div id="app">
    <!-- 输入框数据的双向绑定 -->
    <a-input
      placeholder="请输入任务"
      class="my_ipt"
      :value="inputValue"
      @change="handleInputChange"
    />
    <a-button type="primary" @click="addItem">添加事项</a-button>

    <a-list bordered :dataSource="infoList" class="dt_list">
      <a-list-item slot="renderItem" slot-scope="item">
        <!-- 复选框         相同效果的写法箭头函数写法 ()=>{}  \\\\ (e) => {changeStateById(e)}-->
        <a-checkbox
          :checked="item.done"
          @change="changeStateById($event, item.id)"
          >{{ item.info }}</a-checkbox
        >
        <!-- 删除链接 -->
        <a slot="actions" @click="removeItemById(item.id)">删除</a>
      </a-list-item>

      <!-- footer区域 -->
      <div slot="footer" class="footer">
        <!-- 未完成的任务个数 -->
        <span>{{ undoLength }}条剩余</span>
        <!-- 操作按钮 -->
        <a-button-group>
          <!-- 属性绑定 设置三元表达式来决定样式 -->
          <a-button
            :type="viewKey === 'all' ?  'primary' :'default'"
            @click="changeView('all')"
            >全部</a-button
          >
          <a-button :type="viewKey === 'undo' ? 'primary' : 'default'" @click="changeView('undo')">未完成</a-button>
          <a-button :type="viewKey === 'done' ? 'primary' : 'default'" @click="changeView('done')">已完成</a-button>
        </a-button-group>
        <!-- 把已经完成的任务清空 -->
        <a @click="clearDone">清除已完成</a>
      </div>
    </a-list>
  </div>
</template>

<script>
import { mapGetters, mapState } from 'vuex'
export default {
  name: 'app',
  data() {
    return {}
  },
  // 调用store中的异步请求函数
  created() {
    this.$store.dispatch('getData')
  },
  // 设置页面的计算属性
  computed: {
    ...mapState([ 'inputValue', 'viewKey']),
    // 设置计算属性值
    ...mapGetters(['undoLength', 'infoList']),
  },
  methods: {
    // 处理input输入框监听函数
    handleInputChange(event) {
      console.log(event.target.value)
      this.$store.commit('setInputValue', event.target.value)
    },
    addItem() {
      if (this.inputValue.trim().length <= 0) {
        return this.$message.warning('输入内容不能为空')
      }
      // 往共享数据中添加数据
      this.$store.commit('addItem')
    },
    // 根据id值删除对应的item项
    removeItemById(id) {
      this.$store.commit('removeItemById', id)
    },
    changeStateById(event, id) {
      // 设置是否完成状态
      console.log(
        'check box的选定状态' + event.target.checked + ' id的值是: ' + id
      )
      const info = {
        id: id,
        state: event.target.checked,
      }
      this.$store.commit('changeStateById', info)
    },
    changeView(key) {
      // 按钮点击事件 高亮背景颜色
      this.$store.commit('changeViewKey', key)
    },
    // 清除已经完成的项目
    clearDone() {
      this.$store.commit('clearDone')
    },
  },
}
</script>

<style scoped>
#app {
  padding: 10px;
}

.my_ipt {
  width: 500px;
  margin-right: 10px;
}

.dt_list {
  width: 500px;
  margin-top: 10px;
}

.footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
</style>
